<template lang="html">
  <div class="customerBox">
    <h1>暂未开放</h1>
  <!--  <el-row style="height:50px; background:#fff;">
      <el-col :span="2" >
        <span style="line-height:50px;">客户管理</span>
      </el-col>
    </el-row>
    <el-row class="formBox box1">
        <el-col :span="2" class="text-right">
          <span>手机号：</span>
        </el-col>
        <el-col :span="4" class="text-left">
          <el-input v-model="orderNumb" size="small" class="text" placeholder="请输入内容"></el-input>
        </el-col>
        <el-col :span="2" class="text-right">
          <span>客户姓名：</span>
        </el-col>
        <el-col :span="4" class="text-left">
          <el-input class="text" size="small" placeholder="请输入内容"></el-input>
        </el-col>
        <el-col :span="2" class="text-right">
          <span>微信昵称：</span>
        </el-col>
        <el-col :span="4" class="text-left">
          <el-input class="text" size="small" placeholder="请输入内容"></el-input>
        </el-col>
    </el-row>
    <el-row class="formBox box2">
      <el-col :span="2" :offset="2" class="text-left">
         <el-button type="success" class="btn"  size="mini">筛选</el-button>
      </el-col>
      <el-col :span="2" :offset="16" class="text-left">
         <el-button type="success" class="btn"  size="mini"  @click="dialogFormVisible = true" >＃新增客户</el-button>
      </el-col>
    </el-row>-->

    <!-- 弹出框 -->
    <!--<el-dialog title="新增商家" :visible.sync="dialogFormVisible" class="tanBox">
      <el-form :model="form">
        <el-row>
          <el-col :span="3" class="text-right" style="margin-bottom:10px;" >
            <span >商家名：</span>
          </el-col>
          <el-col :span="6" >
            <el-input size="small" v-model="form.name" auto-complete="off" ></el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3" class="text-right" >
            <span >商家logo：</span>
          </el-col>
          <el-col :span="12" style="margin-bottom:10px;" >
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :file-list="fileList2"
              list-type="picture">
              <el-button size="small" type="success" class="btn">点击上传</el-button>
              <span slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</span>
            </el-upload>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3" class="text-right" style="margin-bottom:10px;">
            <span >所在地：</span>
          </el-col>
          <el-col :span="4" >
            <el-select v-model="add1" size="small" @change="getadd2" placeholder="请选择">
              <el-option
                v-for="(item,index) in options"
                :key="index"
                :data-id="index"
                :label="item.name"
                :value="item.name">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="4" class="add" >
            <el-select v-model="add2" size="small" @change="getadd3" placeholder="请选择">
              <el-option
                v-for="item in options2"
                :key="item.name"
                :label="item.name"
                :value="item.name">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="4" class="add" >
            <el-select size="small" v-model="add3" placeholder="请选择">
              <el-option
                v-for="item in options3"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3" class="text-right" style="margin-bottom:10px;">
            <span >详细地址：</span>
          </el-col>
          <el-col :span="6" >
            <el-input size="small" v-model="form.address" auto-complete="off" ></el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3" class="text-right" style="margin-bottom:10px;">
            <span >详细介绍：</span>
          </el-col>
          <el-col :span="8" >
            <el-input
              type="textarea"
              :rows="3"
              placeholder="请输入内容">
            </el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5" class="text-right" style="margin-top:10px;" >
            <el-button type="success" class="btn" size="mini" @click="dialogFormVisible = false">保存</el-button>
          </el-col>
        </el-row>
      </el-form>

    </el-dialog>


    <el-row class="box3">
      <ul class="listBox5">
          <li class="first">
            <span class="name gray">客户姓名</span>
            <span class="sex gray">性别</span>
            <span class="telephone gray">手机号</span>
            <span class="wxNumber gray">微信号/微信昵称</span>
            <span class="place gray">所在地</span>
            <span class="type gray">标签</span>
            <span class="jifen gray">积分</span>
            <span class="buy gray">购买</span>
            <span class="money gray">消费金额</span>
            <span class="age gray">宝贝年龄</span>
          </li>
          <li>
            <span class="name green">张三</span>
            <span class="sex gray">男</span>
            <span class="telephone gray">18125556742</span>
            <span class="wxNumber gray">huitailan ／ Jessie雅雅</span>
            <span class="place gray">四川 / 成都</span>
            <span class="type gray">景区、酒店、剧场</span>
            <span class="jifen gray">125</span>
            <span class="buy green">0</span>
            <span class="money gray">1,2500.00</span>
            <span class="age gray">2岁,3岁</span>
          </li>

      </ul>
    </el-row>

    <el-row style="padding-bottom:20px;">
      <el-col :span="2" :offset="10" class="text-right">
        <span>每页20条</span>
      </el-col>
      <el-col :span="6" class="text-left">
         <el-pagination
           :current-page.sync="currentPage3"
           :page-size="100"
           layout="prev, pager, next, jumper"
           :total="1000">
         </el-pagination>
      </el-col>
    </el-row>-->
  </div>
</template>

<script>
export default {
  data(){
    return {
      fileList2: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
      currentPage3:2,
      orderNumb:'',
      dialogFormVisible:false,
      labelPosition:'left',
      formLabelAlign:{
        name:'',
        region:'',
        type:''
      },
      value:'',
      value2:'',
      value3:'',
      options: this.$store.state.city,
      options2:[],
      options3:[],
      add1:'',
      add2:'',
      add3:'',
      form: {
          name: "",
          address:"",
          city:"",
          content:""
      }
    }
  },
  methods:{
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    getadd2:function (){
      var N,len= this.$store.state.city.length;
      for(let i=0;i<len;i++){
        if(this.options[i].name==this.add1){
          N=i;
        }
      }
      this.options2=this.options[N].city;
    },
    getadd3:function (){
      console.log(this.add2)
       var N,len= this.options2.length;
      for(let i=0;i<len;i++){
        if(this.options2[i].name==this.add2){
          N=i;
          console.log(N)
        }
      }

      this.options3=this.options2[N].area;
    }
  },
  computed:{

  },
  created(){
    this.$store.state.index='6';
  }
}
</script>

<style lang="Sass">
.customerBox{width: 100%; height: 100%;box-sizing: border-box;

  .formBox{ background: #fff; padding: 10px; text-align: left;

    .text{ height: 30px;
      .el-input__inner{height: 30px; width: 100%;}
    }
    .date{width: 150px; height: 30px;
      .el-input__inner{height: 30px; width: 100%;}
    }
    .select{width: 120px;
      .el-input__inner{width: 100%;}
    }
  }
  span{font-size: 13px; line-height: 30px;}
  .box1{border-radius: 10px 10px 0 0; padding: 20px 10px 0 10px; margin: 20px 10px 0 10px;}
  .box2{border-radius: 0 0 10px 10px; padding: 10px 10px 10px 10px; margin: 0px 10px ;}
  .box3{margin: 20px 10px; background: #fff; padding: 10px; box-sizing: border-box; border-radius: 10px;
    .cell{text-align: left;}
  }
  .btn{height: 32px; padding: 0 10px;
    span{line-height: 0px;  }
  }
  .tanBox{
    .el-dialog--small{min-width: 650px;}
    .el-dialog__header{text-align: left;}
  }
  .el-upload{margin-left: -30px;}
}
.listBox5{width: 100%; background: #fff;

  .first{display: flex; height: 30px; line-height: 30px; text-align: left; padding: 0 5px; background: #fff !important;

      span{display: inline-block; font-size: 14px; line-height: 30px;}
      .name{flex: 0 0 100px; height: auto;}
      .sex{flex: 0 0 80px;}
      .telephone{flex: 0 0 120px;}
      .wxNumber{flex: 1;}
      .place{flex: 0 0 120px;}
      .type{flex: 0 0 130px;}
      .jifen{flex: 0 0 70px;}
      .buy{flex: 0 0 70px;}
      .money{flex: 0 0 120px;}
      .age{flex: 0 0 80px;}
  }
  li{display: flex; height: auto;  text-align: left; padding: 10px 5px; box-sizing: border-box;

    span{display: inline-block; box-sizing: border-box; line-height: 14px;  line-height: 30px; }
    .name{flex: 0 0 100px; height: auto;}
    .sex{flex: 0 0 80px;}
    .telephone{flex: 0 0 120px;}
    .wxNumber{flex: 1;}
    .place{flex: 0 0 120px;}
    .type{flex: 0 0 130px;}
    .jifen{flex: 0 0 70px;}
    .buy{flex: 0 0 70px;}
    .money{flex: 0 0 120px;}
    .age{flex: 0 0 80px;}
  }
  li:nth-of-type(odd){background: #FAFAFC;}

}
.text-left{text-align: left;}
.text-right{text-align: right;}
.heightAll{height: 100%;}
.add{margin-left: 10px;}
</style>
